<template>
  <div class="top_container">
    <div class="top_title"></div>

    <div class="time">{{ currentTime }}</div>
    <div class="left_top">
      <div class="sye">首页</div>
      <div class="to_work" @click="toWork">前往工作页面</div>
    </div>
    <div class="menu_left menu">
      <ul>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
    <div class="menu_right menu">
      <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
  </div>
</template>

<script setup lang="ts">
import dayjs from 'dayjs'
import { ref, watchEffect } from 'vue'
import { useRouter } from 'vue-router'
//获取路由器对象
const $router = useRouter()
// 获取当前时间
let currentTime = ref(dayjs().format('YYYY-MM-DD HH:mm:ss'))
watchEffect(() => {
  setInterval(() => {
    currentTime.value = dayjs().format('YYYY-MM-DD HH:mm:ss')
  }, 1000)
})
const toWork = () => {
  $router.push('/platform')
}
</script>
<style lang="scss" scoped>
.top_container {
  position: relative;
  .top_title {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 1380px;
    height: 144px;
    background: url(../../../../assets/svg/biaoti.svg);
  }
  .menu {
    height: 54px;
    margin-top: 70px;
  }
  .menu_left {
    width: 366px;
    float: left;
    margin-left: 42px;
    ul {
      width: 100%;
      height: 54px;
      display: flex;
      li {
        width: 150px;
        height: 54px;
      }
    }
    ul li:nth-child(1) {
      background: url(../../../../assets/svg/zonglanCitiao.svg) no-repeat;
    }
    ul li:nth-child(2) {
      background: url(../../../../assets/svg/gongyeCitiao.svg) no-repeat;
      margin-left: -35px;
    }
    ul li:nth-child(3) {
      background: url(../../../../assets/svg/nengyuanCitiao.svg) no-repeat;
      margin-left: -35px;
    }
  }
  .menu_right {
    width: 425px;
    float: right;
    ul {
      width: 425px;
      height: 54px;
      display: flex;
      li {
        width: 138px;
        height: 54px;
      }
    }
    ul li:nth-child(1) {
      background: url(../../../../assets/svg/jianzhuCitiao.svg) no-repeat;
    }
    ul li:nth-child(2) {
      background: url(../../../../assets/svg/jiaotongCitiao.svg) no-repeat;
      margin-left: -56px;
    }
    ul li:nth-child(3) {
      background: url(../../../../assets/svg/nongyeCitiao.svg) no-repeat;
      margin-left: -36px;
    }
    ul li:nth-child(4) {
      background: url(../../../../assets/svg/juminCitiao.svg) no-repeat;
      margin-left: -36px;
    }
  }
  .time {
    position: absolute;
    left: 1664px;
    top: 18px;
    font-size: 18px;
    color: #6384ab;
    letter-spacing: 2px;
  }
  .left_top {
    .sye {
      position: absolute;
      left: 27px;
      top: 28px;
      cursor: default;
      width: 39px;
      height: 18px;
      font-size: 18px;
      line-height: 21px;
    }
    .to_work {
      position: absolute;
      left: 95px;
      top: 22px;
      font-size: 14px;
      color: #e9f1fa;
      width: 194px;
      height: 30px;
      text-align: center;
      line-height: 28px;
      // background: radial-gradient( 50% 36% at 47% 25%, rgba(31,76,130,0) 0%, #3768A8 100%);
      border-radius: 4px 4px 4px 4px;
      border: 2px solid #347dcd;
      cursor: default;
    }
  }
}
</style>
